<script setup>
import { ref, reactive, getCurrentInstance, onMounted, watch, render, markRaw } from "vue";

const instance = getCurrentInstance();
const _this = instance.appContext.config.globalProperties; //vue3获取当前this

// 组件中使用，接收传参的
let propsData = defineProps({
  data: {
    type: Array,
    required: true,
  },
  loading: {
    type: Boolean,
    default: false,
  },
  columns: {
    type: Function,
    required: true,
  },
  pagination: Object,
  showOperate: {
    type: Boolean,
    default: true,
  },
  selectClassification: Array
});
// 组件中使用，接收事件的
const emits = defineEmits(['operate1', 'operate2', 'operate3', 'operate4', 'operate5', 'select', 'paginationChange']);

function handleSizeChange(size){
  propsData.pagination.size = size;
  emits('paginationChange', propsData.pagination);
};
function handleCurrentChange(current){
  propsData.pagination.current = current;
  emits('paginationChange', propsData.pagination);
};
</script>
<template>
  <div class="mw_table">
    <el-table 
      style="width: 100%"
      stripe 
      tooltip-effect="dark" 
      element-loading-text="Loading..."
      element-loading-background="rgba(23, 36, 69, 0.3)"
      :data="data" 
      v-loading="loading" 
      @select="(selectList) => emits('select', selectList)">
      <el-table-column v-for="(item, index) in columns(showOperate, selectClassification)" :key="index" v-bind="item">
        <template #default="scope" v-if="!item.type && !item.formatter">
          <div v-if="!!item.render">
            <component
              :is="item.render" 
              :row="scope.row"
              @operate1="() => emits('operate1', scope.row, item)" 
              @operate2="() => emits('operate2', scope.row, item)"
              @operate3="() => emits('operate3', scope.row, item)"
              @operate4="() => emits('operate4', scope.row, item)" 
              @operate5="() => emits('operate5', scope.row, item)" 
            ></component>
          </div>
          <span v-else>
            <template v-if="item.tooltip">
              <el-tooltip :content="scope.row[scope.column.property]" placement="right" effect="car">
                {{ scope.row[scope.column.property] }}
              </el-tooltip>
            </template>
            <template v-else>
              {{ scope.row[scope.column.property] }}
            </template>
          </span>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      v-if="pagination"
      class="mw_pagination"
      v-model:current-page="pagination.page"
      v-model:page-size="pagination.size"
      :small="false"
      :background="false"
      layout="jumper, next, pager, prev, sizes, total"
      :total="pagination.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>